<template>
	<div class="menu_box">
		<div class="logo_menu">
			<img class="logo" src="//fes.qyerstatic.com/FgP-BkmxyKWjMKv-bAbvpXg4G2r2?imageslim" width="76"
				height="36">
			<div class="menu_val" v-for="(val,index) in menuList" :key="index">
				<div class="pre_line">
					
				</div>
				<div class="menu_val_box">
					<p class="content">{{ val.name }}</p>
					<img  class="icon" src="@/assets/箭头右.png" alt="">
				</div>
				<!-- <div class="menu_two">
					<div class="menu_two_val">
						<img class="icon" src="images/菜单.png" alt="" srcset="">
						<div class="name_val">旅行论坛</div>
						<img class="icon" src="images/右箭头.png" alt="" srcset="">
						<div class="menu_three">
							<div class="section_title">
								<span>热门板块</span>
								<div class="more_box">
									<span>热门板块</span>
									<img class="icon" src="images/右箭头.png">
								</div>
							</div>
							<dl class="section_item">
								<dt>兴趣小组</dt>
								<dd>
									<span>结伴同游</span>
									<span>签证</span>
									<span>结伴同游</span>
									<span>签证</span>
									<span>结伴同游</span>
									<span>签证</span>
									<span>结伴同游</span>
									<span>签证</span>
									<span>结伴同游</span>
									<span>签证</span>
									<span>结伴同游</span>
									<span>签证</span>
								</dd>
							</dl>
							
						</div>
					</div>
					
				</div> -->
				
			</div>
		</div>
		<div class="function_box">
			<div class="search_box">
				<input class="search_input" type="text">
				<img class="search_icon" src="@/assets/搜索.png" alt="">
	
			</div>
			<img class="search_icon_hidden" src="@/assets/搜索 (2).png" alt="">
			|
			<img class="icon" src="@/assets/淘宝.png" alt="">
			<img class="icon" src="@/assets/qq.png" alt="">
			<img class="icon" src="@/assets/微信 (1).png" alt="">
			<img class="icon" src="@/assets/新浪微博.png" alt="">
			<p class="rigister">注册</p>
			<p class="login">登录</p>
		</div>
	</div>
</template>

<script>
	import  indexapi  from "@/api/indexApi";
	export default{
		data(){
			return{
				menuList:[]
			}
		},
		mounted(){
			this.getMenuOne();
		},
		methods:{
			async getMenuOne() {
				// 尝试从API获取一级菜单，并结构化处理菜单数据，生成多级菜单列表
				try {
					// 异步请求获取一级菜单数据
					const res = await indexapi.getMenuOne();
					if (res.code === 1) {
						this.menuList = res.data;
						/**
						 * 异步获取指定菜单ID的子菜单
						 * @param {string} menuId - 菜单ID
						 * @returns {Promise<Array>} 返回子菜单数据的Promise
						 */
						const fetchMenuChildren = async (menuId) => {
							try {
								// 异步请求获取子菜单数据
								const menuTwoRes = await indexapi.getMenuChildren("menuId", menuId);
								return menuTwoRes.data;
							} catch (error) {
								// 在请求子菜单数据失败时，打印错误信息并返回空数组
								console.error(`Error fetching menu children for ID: ${menuId}`, error);
								return [];
							}
						};
						/**
						 * 递归结构化菜单数据，生成多级嵌套的菜单列表
						 * @param {number} menuLevel - 当前处理的菜单级别
						 * @param {string|null} parentMenuId - 父菜单的ID，初始为null表示顶级菜单
						 */
						const structureMenu = async (menuLevel, parentMenuId) => {
							// 防止无限递归，设定最多处理四级菜单
							if (menuLevel > 4) return;
							// 并行请求所有父菜单的子菜单数据
							const childrenPromises = this.menuList
								.filter(menu => menu.id === parentMenuId)
								.map(menu => fetchMenuChildren(menu.id));
							// 等待所有子菜单数据异步加载完成
							const childrenResults = await Promise.all(childrenPromises);
							// 更新菜单列表，为每个父菜单添加子菜单数据
							this.menuList = this.menuList.map(menu => {
								if (menu.id === parentMenuId) {
									menu.children = childrenResults[0];
								}
								return menu;
							});
							// 递归处理下一级菜单
							await structureMenu(menuLevel + 1, parentMenuId);
						};
						// 从第一级菜单开始递归结构化菜单数据
						await structureMenu(1, null);
					}
				} catch (error) {
					// 在获取顶级菜单数据失败时，打印错误信息
					console.error('Failed to fetch top level menu:', error);
					// 这里可以添加用户提示逻辑，比如显示错误信息
				}
				console.log(this.menuList);
				// const res =  await indexapi.getMenuOne();
				// if (res.code == 1) {
				// 	this.menuList = res.data;
				// 	for(let val of this.menuList){
				// 		const menuTwoRes =  await indexapi.getMenuChildren("menuId",val.id);
				// 		val.children = menuTwoRes.data;
				// 		for(let val2 of val.children){
				// 			const menuThreeRes =  await indexapi.getMenuChildren("menuId",val2.id);
				// 			val2.children = menuThreeRes.data;
				// 			for(let val3 of val2.children){
				// 				const menuFourRes =  await indexapi.getMenuChildren("menuId",val3.id);
				// 				val3.children = menuFourRes.data;
				// 			}
				// 		}
				// 	}
				// }
			}
		}

	}

</script>

<style lang="scss">
	.menu_box {
		width: 100%;
		height: 60px;
		background: linear-gradient(180deg, rgba(0, 0, 0, .3) 10%, transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 30px;
		box-sizing: border-box;
	
		.logo_menu {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
	
			.logo {
				width: 76px;
				height: 36px;
				margin-right: 18px;
			}
	
			.menu_val {
				height: 100%;
				position: relative;
				white-space: normal;
	
				.pre_line {
					width: 100%;
					height: 0px;
					background-color: white;
					z-index: 1;
					position: absolute;
					transition: height 0.1s linear;
				}
	
				.menu_val_box {
					padding: 0px 12px 0px 12px;
					z-index: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					white-space: normal;
	
					.content {
						color: #fff;
						font-weight: 600;
						font-size: 16px;
						white-space: normal;
						flex-shrink: 0;
					}
	
					.icon {
						width: 16px;
						height: 16px;
						transform: rotate(90deg);
						margin-left: 4px;
						flex-shrink: 0;
					}
				}
	
				.menu_two::before {
					content: "";
					display: block;
					position: absolute;
					top: -12px;
					left: 22px;
					width: 0;
					height: 0;
					font-size: 0;
					border-color: transparent transparent #fff;
					border-style: solid;
					border-width: 6px 4px
				}
	
				.menu_two {
					position: absolute;
					display: none;
					padding: 8px 0px;
					top: 55px;
					z-index: 200;
					border-radius: 4px;
					background: #fff;
					box-shadow: 0 0 3px rgba(0, 0, 0, .1);
					line-height: 30px;
					white-space: nowrap;
	
					.menu_two_val {
						width: auto;
						padding: 0px 8px;
						display: flex;
						align-items: center;
	
						.name_val {
							color: #636363;
							font-size: 16px;
							flex-shrink: 0;
							padding: 0px 4px;
						}
	
						.icon {
							width: 16px;
							height: 16px;
						}
	
						.menu_three {
							position: absolute;
							display: none;
							width: 460px;
							z-index: 200;
							border-radius: 4px;
							min-width: 100px;
							top: 0;
							left: 100%;
							padding: 4px 12px;
							background: 0 0;
							white-space: normal;
							background: #fff;
							box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	
							.section_title {
								font-size: 16px;
								line-height: 30px;
								display: flex;
								align-items: center;
								justify-content: space-between;
	
								.more_box {
									display: flex;
									align-items: center;
								}
	
								.icon {
									width: 16px;
									height: 16px;
								}
							}
	
							.section_item {
								border-top-style: solid;
								border-top: 1px dashed #ededed;
								padding-left: 90px;
								line-height: 26px;
							}
	
							.section_item dt {
								float: left;
								margin-left: -90px;
								padding-top: 8px;
								font-size: 16px;
								color: #323232;
							}
	
							.section_item dd {
								padding: 8px 0px;
							}
	
							.section_item dd span {
								padding: 5px 8px;
								font-size: 14px;
								line-height: 14px;
								white-space: nowrap;
								color: #636363;
							}
	
							.section_item dd span:hover {
								background-color: rgba(255, 0, 0, .1);
								;
							}
						}
					}
	
					.menu_two_val_choosed {
						background-color: rgba(255, 0, 0, .1);
					}
				}
			}
		}
	
		.function_box {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: white;
			font-size: 12px;
			line-height: 12px;
			.search_box {
				box-sizing: border-box;
				padding: 4px 6px 4px 6px;
				opacity: 0;
				background: none;
				display: flex;
				align-items: center;
				border-radius: 3px;
				width: 20px;
				transition: all 0.2s linear;
			
				.search_input {
					width: 100%;
					font-size: 14px;
					border: 0;
					background-color: transparent;
					color: #636363;
					outline: none;
				}
			
				.search_icon {
					width: 16px;
					height: 16px;
					flex-shrink: 0;
				}
			}
			
			.search_box_focus {
				opacity: 1;
				background: #fff;
				width: 140px;
			}
			
			.search_icon_hidden {
				position: relative;
				width: 16px;
				height: 16px;
				left: -22px;
				z-index: -1;
			}
			.icon{
				width: 16px;
				height: 16px;
				margin-left: 14px;
			}
			.rigister,.login{
				margin-left: 14px;
			}
		}
	}
</style>